<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
          <searchBox
            title="库存管理"
            :btn="btn"
            @func="showBtn"
            @sendParent="queryListByParams"
          />
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-row class="searchbox">
              <el-col span="3"> 检验项目 </el-col>
              <el-col span="5">
                <el-input
                  placeholder="耗材名称、编号"
                  v-model="queryParams.materialId"
                >
                </el-input>
              </el-col>
              <el-col span="5">
                <el-select
                  v-model="queryParams.type"
                  placeholder="选择耗材类型"
                  class=""
                >
                  <el-option
                    v-for="item in type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col span="1">
                <el-button @click="handleLoadAndQuery()">查询</el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column
                label="耗材编号"
                align="center"
                prop="materialId"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="耗材名称"
                align="center"
                prop="materialName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="耗材类型"
                align="center"
                prop="type"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.type === 1">试剂</span>
                  <span v-if="scope.row.type === 2">质控品</span>
                </template>
              </el-table-column>
              <el-table-column
                label="包装规格"
                align="center"
                prop="packAge"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="生产厂商"
                align="center"
                prop="manufacturer"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="生产日期" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.manufacturingDate | formatDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="失效日期" align="center" prop="shelflife">
              </el-table-column>
              <el-table-column
                label="剩余库存数"
                align="center"
                prop="surplus"
              />
              <el-table-column label="单位" align="center" prop="unit" />
              <el-table-column label="科室" align="center" prop="deptName" />
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handlePutIn(scope.row)"
                    >入库记录</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleOut(scope.row)"
                    >消耗记录</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!--          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />-->
          <div class="pagination-container">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="handleLoadAndQuery"
            />
          </div>
        </el-card>
      </el-row>
    </div>
    <el-drawer
      title="新增"
      :visible.sync="isVisibleAdd"
      size="80%"
      :before-close="handleCloseAdd"
    >
      <addEdit @func="showAdd" />
    </el-drawer>
  </div>
</template>

<script>
import addEdit from "@/views/consumable/repertory/components/addEdit";
import { materialInventoryList } from "../../../api/business/materialInventory";
import { dateFormat } from "@/utils/index";

export default {
  name: "repertory",
  components: {
    addEdit
  },
  data() {
    return {
      btn: {
        repertory: true,
        add: true,
        reg: false,
        down: false,
        export: false,
        imp: false,
        pd: true,
        pageNum: 1,
        pageSize: 20
      },
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: "1",
      deviceInfo: {},
      type: [
        {
          value: null,
          label: "选择耗材类型"
        },
        {
          value: 1,
          label: "试剂"
        },
        {
          value: 2,
          label: "质控品"
        }
      ],
      value: "",
      total: 5,
      isVisibleAdd: false,
      materialNameOrNo: "",
      materialType: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        materialId: "",
        type: ""
      }
    };
  },
  watch: {},
  created() {
    this.handleLoadAndQuery();
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return dateFormat(date, "yyyy/MM/dd");
    }
  },
  methods: {
    showBtn(data) {
      if (data == "add") {
        this.isVisibleAdd = true;
      } else if (data === "pd") {
        this.handleRepertoryCheck();
      }
    },
    showAdd(data) {
      this.isVisibleAdd = data;
    },
    handleCloseAdd() {
      this.isVisibleAdd = false;
    },
    handleLoadAndQuery() {
      this.loading = true;
      materialInventoryList(this.queryParams).then(response => {
        this.checkList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 入库记录
    handlePutIn(row) {
      this.$router.push({ path: "/consumable/putRecord" });
    },
    // 消耗记录
    handleOut(row) {
      this.$router.push({ path: "/consumable/expendRecord" });
    },
    // 库存盘点
    handleRepertoryCheck() {
      this.$router.push({ path: "/consumable/repertory/check" });
    },
    queryListByParams(data) {
      // console.log(data)
      this.checkList = data.rows;
      this.total = data.total;
      this.btn.materialNameOrNo = data.materialNameOrNo;
      this.btn.materialType = data.materialType;
    },
    handleCurrentChange(val) {
      this.btn.pageNum = val;
      this.handleLoadAndQuery();
    },
    handleSizeChange(val) {
      this.btn.pageNum = 1;
      this.btn.pageSize = val;
      this.handleLoadAndQuery();
    }
  }
};
</script>
